<template lang="">
  <div class="banner">
    <div class="banner_main">
      <a-carousel :after-change="onSlideChange" autoplay arrows>
        <template #prevArrow>
          <div
            class="custom-slick-arrow slick-arrow slick-prev"
            style="left: 10px; z-index: 1; display: block"
          >
            <i aria-label="$t('tuBi')" class="anticon anticon-left">
              <svg
                viewBox="64 64 896 896"
                data-icon="left"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
                focusable="false"
                class=""
              >
                <path
                  d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
                ></path>
              </svg>
            </i>
          </div>
        </template>

        <template #nextArrow>
          <div
            class="custom-slick-arrow slick-arrow slick-next"
            style="right: 10px; display: block"
          >
            <i aria-label="$t('tuBi-0')" class="anticon anticon-right">
              <svg
                viewBox="64 64 896 896"
                data-icon="right"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
                focusable="false"
                class=""
              >
                <path
                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
                ></path>
              </svg>
            </i>
          </div>
        </template>

        <div class="banner_img">
          <img v-lazy="getAssetsImages('banner/banner0014.png')" />
        </div>
      </a-carousel>
    </div>

    <div
      class="info_information"
    >
      <div class="info_information_inner fix">
        <ul>
          <li>
            <a href="#/sponsor" class="banner-item-info">
              <img
                v-lazy="getAssetsImages('home/feature-icon00001.png')" 
              />
              <div>
                <h4>{{ $t('zanZ') }}</h4>
                <p>{{ $t('xieS') }}</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#/movie" class="banner-item-info">
              <img
                v-lazy="getAssetsImages('home/feature-icon00002.png')" 
              />
              <div>
                <h4>{{ $t('mian') }}</h4>
                <p>{{ $t('mian-0') }}</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#/aboutUs/3" class="banner-item-info">
              <img
                v-lazy="getAssetsImages('home/feature-icon00003.png')" 
              />
              <div>
                <h4>{{ $t('zheng') }}</h4>
                <p>{{ $t('zheng-0') }}</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#/preferentialActivity" class="banner-item-info">
              <img
                v-lazy="getAssetsImages('home/feature-icon00004.png')" 
              />
              <div>
                <h4>{{ $t('chao') }}</h4>
                <p>{{ $t('fanS') }}</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="home_notice_inner fix">
        <img
          v-lazy="getAssetsImages('home/icon_home_notice.png')" 
          width="22"
        />
        <marquee
          data-show="true"
          behavior="scroll"
          onmouseover="this.stop()"
          onmouseout="this.start()"
          scrollamount="3"
          >{{ $t('vrCa') }}</marquee
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getAssetsImages } from '@/utils';

function onSlideChange() {
  console.log(111);
}
</script>
<style lang="less">
.banner {
  position: relative;
  top: -100px;
  background-color: #f0f2f5;
  .info_information {
    background: linear-gradient(360deg, rgba(8, 19, 39, 0.38) 26.12%, rgba(25, 37, 61, 0.0266) 100%);
  }
  .banner-item-info {
    display: flex;
  }
  .info_information_inner ul li {
    height: auto;
    background: linear-gradient(99.76deg, #F4F9FF 9.97%, #F3F7FF 80.06%);
    box-shadow: 0px 0px 9px rgba(117, 165, 238, 0.25);
    border-radius: 8px;
  }
}
</style>
